<template>
    <div>
        请打开浏览器开发工具，查看console信息，每次测试请重新刷新页面
        <span id="url_show">{{ url }}</span>
        <br/>
        <span v-on:click="changeUrl" style="cursor: pointer; background-color: #42b983">更换链接地址</span>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                show: true,
                url: "http://www.baidu.com",
                message: 'Hello',
                browseTime: 0,  // 浏览时长初始值为 0
                timer: null
            }
        },
        /**
         * 计算属性
         */
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        },
        /**
         * 在实例初始化之后，数据观测和事件配置之前被调用，
         * 此时组件的选项对象还未创建，el 和 data 并未初始化，
         * 因此无法访问methods， data， computed等上的方法和数据。
         */
        beforeCreate() {
            console.group("beforeCreate()");
            console.log("this.show == %s", this.show);    // undefined
            console.log("this.url == %s", this.url);    // undefined
            console.log("this.reversedMessage == %s", this.reversedMessage);
            console.groupEnd();
        },
        /**
         * 实例已经创建完成之后被调用，
         * 在这一步，实例已完成以下配置：
         * 1.数据观测、属性和方法的运算，
         * 2.watch/event事件回调，
         * 3.完成了data 数据的初始化，
         * 4.el没有。挂载阶段还没有开始, $el属性目前不可见。
         *
         * 这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，
         * 并且修改可以通过vue的响应式绑定体现在页面上，，
         * 获取computed中的计算属性等等，
         *
         * 通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，
         * 值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，
         * 因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，
         * 建议在组件路由钩子beforeRouteEnter中完成
         */
        created() {
            console.group("created()");
            console.log("this.$el == %s", this.$el);//undefined
            console.log("this.show == %s", this.show);
            console.log("this.url == %s", this.url);
            console.log("this.reversedMessage == %s", this.reversedMessage);

            let urlShowDom = document.getElementById("url_show");
            console.log("urlShowDom == %s", urlShowDom);
            console.groupEnd();
        },
        /**
         * 挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM），
         * 实例已完成以下的配置：
         * 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂载html到页面上。
         */
        beforeMount() {
            console.group("beforeMount()");
            console.log("this.$el == %s", this.$el);//undefined

            let urlShowDom = document.getElementById("url_show");
            console.log("urlShowDom == %s", urlShowDom);
            console.groupEnd();
        },
        /**
         * 挂载完成
         * 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
         * 如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
         * 注意 mounted 不会保证所有的子组件也都一起被挂载。
         * 如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick
         *
         * 此时一般可以做一些ajax操作，mounted只会执行一次。
         */
        mounted() {
            /**
             * 初始化页面浏览时长统计定时器
             */
            this.initTimer(); // 页面加载完成后开始计时

            /**
             * 注册了窗口尺寸变化的监听事件，配合destroy时的销毁事件
             * 销毁事件可以节省系统资源。
             */
            window.onresize = () => { //监听窗口变化，重绘echarts
                return (() => {
                    console.log("window.onresize event invoke")
                })()
            };


            this.$nextTick(function () {
                console.group("mounted()");
                console.log("this.$el == %s", this.$el);//undefined

                let html = document.getElementById("url_show").innerHTML;
                console.log("html == %s", html);
                console.groupEnd();
            })
        },
        /**
         * 在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程
         *
         * 当数据发生变化(即已经变化了),开始重新渲染视图
         * beforeUpdate 视图渲染之前
         * updated 视图渲染之后
         */
        beforeUpdate() {
            console.group("beforeUpdate()");

            /**
             * html才能看到视图渲染的结果差异
             * @type {string}
             */
            let html = document.getElementById("url_show").innerHTML;
            console.log("html == %s", html); // html == http://www.baidu.com
            console.groupEnd();
        },
        /**
         * 数据更改导致地虚拟DOM重新渲染和打补丁只会调用，
         * 调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，
         * 因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用
         *
         * 当数据发生变化(即已经变化了),开始重新渲染视图
         * beforeUpdate 视图渲染之前
         * updated 视图渲染之后
         */
        updated: function () {
            console.group("updated");
            /**
             * html才能看到视图渲染的结果差异
             * @type {string}
             */
            let html = document.getElementById("url_show").innerHTML;
            console.log("html == %s", html);// html == http://www.sina.com.cn
            console.groupEnd();
        },
        /**
         * 切换页面时调用
         * 在实例销毁之前调用，实例仍然完全可用，
         * 这一步还可以用this来获取实例，
         * 一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件
         */
        beforeDestroy(){
            console.group("beforeDestroy()");
            console.log("this.$el == %s", this.$el);
            console.log("this.url == %s", this.url);

            /**
             * 清除定时器
             */
            this.clearTimer();
            console.groupEnd();
        },
        /**
         * 切换页面时调用
         * 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
         *
         * 单纯的销毁组件并不会销毁定时器/监听事件，最终可能会影响页面出现卡顿或者 data 一直被反复修改。
         */
        destroyed() {
            console.group("destroyed()");
            console.log("this.$el == %s", this.$el);
            console.log("this.url == %s", this.url);

            /**
             * 销毁事件，节省系统资源
             */
            console.log("销毁window.onresize事件");
            window.onresize = null;
            console.groupEnd();
        },
        methods: {
            /**
             * 初始化定时器
             */
            initTimer() {
                //设置定时器
                this.timer = setInterval(() => {
                    this.browseTime++;
                    console.log(this.browseTime, "时长累计");
                }, 1000);
            },
            /**
             * 清除定时器
             */
            clearTimer() {
                clearInterval(this.timer); // 离开页面后清除定时器
                console.log("浏览时长为 %s 秒", this.browseTime);
            },
            toggle() {
                this.show = !this.show;
            },
            toggleDblclick() {
                this.toggle();
            },
            changeUrl() {
                this.url = "http://www.sina.com.cn";
            }
        }
    }
</script>